<template>
  <div class="card">
    <div class="card-header">{{ label }}</div>
    <div class="card-content">
      <h3 v-if="item.title">{{ item.title }}</h3>
      <el-tag v-for="tag in item.tags" :key="tag" size="mini">{{ tag }}</el-tag>
      <tinymce-editor v-if="item.content" v-model="item.content" readonly />
      <div v-if="item.desc" >
        <span class="info">资源描述：</span>
        <p class="indent-2">{{ item.desc }}</p>
      </div>
      <div v-if="item.attaches && item.attaches.length" class="card-list m-t-8">
        <span class="info">附件列表：</span>
        <div v-for="attach in item.attaches" :key="attach.id" class="card-list-item flex">
          <span class="flex-1">{{ attach.title }}</span>
          <span class="hover-as-primary-btn link" @click="download('attach', attach)">下载</span>
        </div>
      </div>
      <div v-if="item.uploads && item.uploads.length" class="card-list m-t-8">
        <span class="info">文件列表：</span>
        <div v-for="upload in item.uploads" :key="upload.id" class="card-list-item flex">
          <span class="flex-1">{{ upload.title }}</span>
          <span class="hover-as-primary-btn link" @click="download('upload', upload)">下载</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'resource-card',
  props: {
    label: String,
    item: Object,
  },
  methods: {
    download(type, file) {
      this.$api.other.download({ key: file.key, curFileId: file.id })
        .then((res) => {
          // 上传资源在上传的时候，标题中会去掉后缀，这里要加上
          // 附件是没有做处理的
          const fileName = `${file.title}${type === 'upload' ? res.data.ext : ''}`;
          window.open(`${res.data.ufile}?attname=${fileName}`, '_self');
        })
        .catch(() => {});
    },
  },
};
</script>

<style></style>
